<template>
  <div class="personalInfo">
    <x-header title="个人信息" :left-options="{backText:'我'}" class='whiteHeader'></x-header>
    <div class="personalInfoList">
    	<div class="pHeadImg" @click="goModifyImg">
    		<div class="pHeadImgText">
    			<p>头像</p>
    		</div>
    		<div class="pHeadImgs">
    			<div class="pHeadImgPer">
    				<img :src="allData.AVATAR" alt="" id="showImg" class="previewer-demo-img"/>
    			</div>
    			<input type="file" @change="onFileChange" style="display:none;" id="upfile" @click='autoClick'>
    			<div class="pHeadImgArrow">
    				<img src="../../assets/image/rightArrow.png" alt="" />
    			</div>
    		</div>
    	</div>
    	<div class="pLine"></div>
    	<div class="pAccount">
    		<div class="pAccountText">
    			<p>我的账号</p>
    		</div>
    		<div class="pAccountInfo">
    			<div class="pAccountNum">
    				<p>{{allData.USERNAME}}</p>
    			</div>
    			<div class="pAccountArrow">
    				
    			</div>
    		</div>
    	</div>
    	<div class="pLine"></div>
    	<div class="pPhone" @click="goModifyPhone(allData.TEL)">
    		<div class="pPhoneText">
    			<p>手机号码</p>
    		</div>
    		<div class="pPhoneInfo">
    			<div class="pPhoneNum">
    				<p>{{allData.TEL}}</p>
    			</div>
    			<div class="pPhoneArrow">
    				<img src="../../assets/image/rightArrow.png" alt="" />
    			</div>
    		</div>
    	</div>
    	<div class="pLine"></div>
    	<div class="pPassword" @click="goModifyPwd">
    		<div class="pPasswordText">
    			<p>修改密码</p>
    		</div>
    		<div class="pPasswordInfo">
    			<div class="pPasswordNum">
    				<p></p>
    			</div>
    			<div class="pPasswordArrow">
    				<img src="../../assets/image/rightArrow.png" alt="" />
    			</div>
    		</div>
    	</div>
    	<div class="pLine"></div>    	
    	<div class="pBlank"></div>
    </div>
    
    <!--底部弹窗-->     
    <actionsheet v-model="sheetVisible" :menus="{menu1:'更换头像',menu2:'查看头像'}" @on-click-menu-menu1="changeImg" @on-click-menu-menu2="showImg(allData.AVATAR)" show-cancel></actionsheet>
    
    <!--查看头像-->
    <popup v-model="popupVisible" height="100%" >
	    	<div class="popupImg" @click="noShowImg">
	    		<img :src="showImgUrl" alt="" />
	    	</div>
	  </popup>
    
  </div>
</template>
<script>
/*个人信息*/
import {XHeader,Actionsheet,Popup,Alert } from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
export default {
  name:"personalInfo",
  // 数据
  data(){

    return{
    	userId:'',    	
    	sheetVisible:false,//底部弹窗是否可见
    	allData:'',//所有个人信息    	
    	showImgUrl:'',//查看头像地址预览    	
    	popupVisible:false,//查看头像弹窗
    	
    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');
    //this.userId = 137038;
    //个人信息
    this.$fetchGet('/UserWeb/getUserInfo.action',{USER_ID:this.userId}).then(res=>{    	
            if(res.STATUS_CODE == 1){
            	this.allData = res;
            	this.showImgUrl = res.AVATAR;
                //console.dir(this.allData);
            }                                 
    },err=>console.log(err));
    
  },
  // el被创建，并挂载到实例上
  mounted(){
		
  },
  // 方法（实例中的方法）-----------
  methods:{
  		//显示底部弹窗
  		goModifyImg(){  			
  			this.sheetVisible = true;  			
  			upfile.style.display = 'none';
  		},
  		//修改头像
  		changeImg(){
				upfile.style.display = 'block';
  			this.sheetVisible = false;
  			setTimeout(()=>this.autoClick(),0);			
  		},  	
  		//自动点击
  		autoClick(){  	
  			document.getElementById("upfile").click();
  			document.getElementById("upfile").click();//写两次才能自动触发点击事件
  			this.sheetVisible = false;
  		},
  		//查看头像
  		showImg(id){  			  			 
  			this.popupVisible = true;
  		},
  		//不显示图片
  		noShowImg(){  			
  			this.popupVisible = false;
  		},
  		//上传文件
  		onFileChange($event){
				//console.dir($event);						
				if ($event.target.files.length == 0){
						return ;
				}
				//图片预览fileReader
				let fr = new FileReader();
        fr.readAsDataURL($event.target.files[0]);
				let that = this;
				let sImg = document.getElementById('showImg'); 
				fr.onload = function(evt){			
					//this.showImgUrl = evt.target.result;
					sImg.src = evt.target.result;	
					//上传头像 文档是1.0版本
	  			let obj = {};
	  			obj.USER_ID = that.userId;
	  			obj.IMAGE = evt.target.result.split(",")[1]; 		  			
			    that.$fetchPost('/CUserWeb/UploadImageBase64.action',obj).then(res=>{    
			    		//console.dir(res);
	            if(res.STATUS_CODE == 1){
	            		that.allData.AVATAR = res.AVATAR;		            		 		            	
	            }
			    },err=>console.log(err));										
				}
										
  		},
    	//修改手机
			goModifyPhone(id){			
				this.$router.push('modifyPhone');
			},
			//修改密码
			goModifyPwd(){
				this.$router.push('modifyPwd');
			},	
			
  },
  // 子组件
  components:{
    XHeader,
    Actionsheet,
    Popup,
    Alert
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../../assets/css/public.less');
#upfile{max-width:7.5rem;overflow:hidden; position:absolute;left:0; z-index:100; font-size:1.1rem;opacity:0;filter:alpha(opacity=0);}
.personalInfo{	
  	background:#efeff4;  	  	
  	.personalInfoList{
  		background:#fff;
  		height:4.8rem;
  		margin-top:0.32rem;  		
  		.pHeadImg{  			
  			height:1.6rem;
  			display:flex;  			
  			.pHeadImgText{
  				width:50%;
  				display:flex;
  				flex-flow:column;
  				justify-content:center;
  				p{  									
  					font-size:0.26rem;
  					color:#555;
  					align-self:flex-start;
  					text-indent:0.45rem;
  					letter-spacing:0.55rem;
  				}
  			}
  			.pHeadImgs{
  				width:50%;
  				display:flex;  		
  				justify-content:flex-end;		
  				.pHeadImgPer{
  					display:flex;
	  				flex-flow:column;
	  				justify-content:center;
	  				margin-right:0.24rem;
  					img{
  						width:1.4rem;
  						height:1.4rem;
  						border-radius:50%;
  						//border:1px solid #efeff4;
  						.borderFu(#efeff4,50%);  	  							
  					}
  				}
  				.pHeadImgArrow{
  					display:flex;
	  				flex-flow:column;
	  				justify-content:center;
	  				margin-right:0.26rem;
  					img{
  						width:0.15rem;
  						height:0.25rem;  						  				
  					}
  				}
  			}
  		}
  		.pLine{
  			width:94%;
  			margin-left:0.45rem;
  			border-bottom:0.01rem solid #efeff4;
  		}
  		.pAccount{
  			height:0.8rem;
  			display:flex;
  			.pAccountText{
  				width:50%;
  				display:flex;
  				flex-flow:column;
  				justify-content:center;
  				p{
  					font-size:0.26rem;
  					color:#555;
  					align-self:flex-start;
  					text-indent:0.45rem;
  				}
  			}
  			.pAccountInfo{
  				width:50%;
  				display:flex;  		
  				justify-content:flex-end;
  				.pAccountNum{
  					display:flex;
	  				flex-flow:column;
	  				justify-content:center;
	  				margin-right:0.35rem;
  					p{
  						font-size:0.26rem;
  						color:#9f9f9f;  						
  					}
  				}
  				.pAccountArrow{
  					display:flex;
	  				flex-flow:column;
	  				justify-content:center;
	  				margin-right:0.26rem;
  					img{
  						width:0.15rem;
  						height:0.25rem;  	
  						border:none;					  				
  					}
  				}
  			}
  		}
  		.pPhone{
  			height:0.8rem;
  			display:flex;
  			.pPhoneText{
  				width:50%;
  				display:flex;
  				flex-flow:column;
  				justify-content:center;
  				p{
  					font-size:0.26rem;
  					color:#555;
  					align-self:flex-start;
  					text-indent:0.45rem;
  				}
  			}
  			.pPhoneInfo{
  				width:50%;
  				display:flex;  		
  				justify-content:flex-end;
  				.pPhoneNum{
  					display:flex;
	  				flex-flow:column;
	  				justify-content:center;
	  				margin-right:0.2rem;
  					p{
  						font-size:0.26rem;
  						color:#9f9f9f;  						
  					}
  				}
  				.pPhoneArrow{
  					display:flex;
	  				flex-flow:column;
	  				justify-content:center;
	  				margin-right:0.26rem;
  					img{
  						width:0.15rem;
  						height:0.25rem;  						  				
  					}
  				}
  			}
  		}
  		.pPassword{
  			height:0.8rem;
  			display:flex;
  			.pPasswordText{
  				width:50%;
  				display:flex;
  				flex-flow:column;
  				justify-content:center;
  				p{
  					font-size:0.26rem;
  					color:#555;
  					align-self:flex-start;
  					text-indent:0.45rem;
  				}
  			}
  			.pPasswordInfo{
  				width:50%;
  				display:flex;  		
  				justify-content:flex-end;
  				.pPasswordNum{
  					display:flex;
	  				flex-flow:column;
	  				justify-content:center;
	  				margin-right:0.2rem;
  					p{
  						font-size:0.26rem;
  						color:#9f9f9f;  						
  					}
  				}
  				.pPasswordArrow{
  					display:flex;
	  				flex-flow:column;
	  				justify-content:center;
	  				margin-right:0.26rem;
  					img{
  						width:0.15rem;
  						height:0.25rem;  						  				
  					}
  				}
  			}
  		}  		
  	}
  	.pBlank{
  		height:8.62rem;
  		background:#efeff4;
  	}
  	.popup1{
  		height:25%;
  		background:#f9f9f9;
  		border-bottom:0.01rem solid #dedee2;
  		display:flex;
  		flex-flow:column;
  		justify-content:center;
  		p{
  			font-size:0.26rem;
  			color:#8c8c8c;
  		}
  	}
  	.popup2{
  		height:25%;
  		background:#f9f9f9;
  		border-bottom:0.01rem solid #dedee2;
  		display:flex;
  		flex-flow:column;
  		justify-content:center;
  		p{
  			font-size:0.44rem;
  			color:#ff2d21;
  		}
  	}
  	.popup3{
  		height:25%;
  		background:#f9f9f9;
  		border-bottom:0.01rem solid #dedee2;
  		display:flex;
  		flex-flow:column;
  		justify-content:center;
  		p{
  			font-size:0.44rem;
  			color:#006fff;
  		}
  	}
  	.popup4{
  		height:25%;
  		background:#f9f9f9;
  		display:flex;
  		flex-flow:column;
  		justify-content:center;
  		p{
  			font-size:0.44rem;
  			color:#006fff;
  		}
  	}  	
  	.popupImg{  		
  		height:100%;
  		background:#171717;
  		display:flex;
  		flex-flow:column;
  		justify-content:center;
  		img{
  			width:40%;  			
  			align-self:center;
  		}
  	}
}
</style>